@import url(./common.css);

// 主要部分的代码
main{
    background-color: black;
    overflow: hidden;
    div{
        color:black;
        border-radius: .1333rem;
        height: 7.8667rem;
        width: 9.4667rem;
        background-color: #fff;
        top: .2667rem;
        overflow: hidden;
        margin: .2667rem auto;
    }
    // 第一个框
    div:first-child{
        .top{
            margin: 0;
            width: 100%;
            height: 2.4rem;
            display: flex;
            align-items: center;
            border-radius: 0;
            border-bottom: 1px solid #e2e2e2;
            .left{
                margin-left: .5333rem;
                float: left;
                font-size: .3333rem;
                width: 2.5333rem;
                height: 1.0667rem;
                p{
                    color: black;
                    display: inline-block;
                    font-size: .4667rem;
                    font-weight: bold;
                }
            }
            .right{
                margin-right: .6667rem;
                float: right;
                border-radius: 0;
                width: auto;
                height:auto;
                div{
                    margin: 0;
                    height: .6667rem;
                    line-height: .6667rem;
                    text-align: center;
                    width: 1.8533rem;
                    border-radius: .3333rem;
                    border: 0;
                    float: left;
                    margin-left: .2933rem;
                    a{
                        font-size: .24rem;
                    }
                    a:hover{
                        cursor: pointer;
                        text-decoration: none;
                    }
                }
                div:first-child{
                    background-color: #30dceb;
                    margin-left: 0;
                }
                div:last-child{
                    background-color: #1e5af3;
                }
            }
        }
        .bottom{
            img{
                width: 9.4667rem;
            }
        }
    }

    //第二个框
    div:nth-child(2){
        // 饮食学堂标题
        .title{
            height: .3867rem;
            border-radius: 0;
            margin: .64rem 0 0 .44rem;
            padding: 0;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            img{
                flex: 1 0 auto;
                height: .3867rem;
                width: auto;
            }
            div{
                margin-left: .2533rem;
                border-radius: 0;
                flex: 1 0 auto;
                color: black;
                height: .3867rem;
                line-height: .3867rem;
                font-size: .3333rem;
            }
        }
        //下面的内容 
        .content{
            border-radius: 0;
            padding: 0;
            margin:.4rem 0 0 0;
            height: 1.7333rem;
            img{
                float: left;
                margin-left: .4267rem;
                height: 1.7333rem;
            }
            div{
                margin: 0;
                border-radius: 0;
            }
            .right{
                float: left;
                margin-left: .32rem;
                height: 1.8667rem;
                width: 5.3333rem;
                p{
                    color: black;
                    font-size: .3467rem;
                    line-height: .5333rem;
                    letter-spacing: .04rem;
                }
                .bottom{
                    margin: .3333rem 0 0 3.2rem;
                    width: auto;
                    height: .3733rem;
                    bottom: 0;
                    right: 0;
                    a{
                        float: left;
                        margin-left: 20px;
                        width: .8rem;
                        height: .3733rem;
                        p{
                            color: #a3a3a3;
                            font-size: .2267rem;
                            line-height: .36rem;
                            letter-spacing: normal;
                        }
                        img{
                            margin-left: 0;
                            height: .36rem;
                            width: .3733rem;
                        }
                    }
                    a:first-child{
                        margin-left: 0;
                    }
                }
            }
        }
    }
}

